<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义非单文件组件一般不用 需要理解</title>
</head>
<body>
<div id="app">
<!--    当每次写标签使用的时候 都会偷偷的实例化定义出来的函数的实例化对象 被称作组件对象
也就是说 每一个组件标签背后都会对应自己的组件对象在支撑着
-->
    <mybutton></mybutton>
    <mybutton></mybutton>
</div>
<script src="js/vue.js"></script>
<script>
    //定义组件的步骤
    //1.定义 定义全局组件(用)和局部组件(不用)
    // 本质上是根据一个配置对象定义返回一个函数 后期当构造函数使用
    //麻烦写法
    // const VueComponent = Vue.extend({
    //     //组件的配置对象和 vue的配置对象很相似,除了el
    //     data() {
    //         //组件的配置对象当中data只能写函数
    //         return {
    //             count: 0
    //         }
    //     },
    //     // data:{
    //     //组件当中不能写对象 写对象就报错
    //     //     count:0
    //     // },
    //     //定义组件模板
    //     template: '<div><h2>hello world</h2><button @click="count++">你点击了{{count}}次</button></div>',
    // })
    // //2.注册 全局注册和局部注册
    // Vue.component('mybutton', VueComponent);
    // //3.使用
    // // <div id="app">
    // //     <mybutton></mybutton>
    // // </div>

    //简单写法:
    //1.定义带注册(本质上还是使用extend生成一个函数 然后再去和mybutton绑定)
    // Vue.component('mybutton',{
    //      //组件的配置对象和 vue的配置对象很相似,除了el
    //      data() {
    //          //组件的配置对象当中data只能写函数
    //          return {
    //              count: 0
    //          }
    //      },
    //      //定义组件模板
    //      template: '<div><h2 style="color:hotpink">hello world</h2><button @click="count++">你点击了{{count}}次</button></div>',
    // })

//2.使用
    const vm = new Vue({
        el: '#app',
        //局部定义组件
        components:{
            mybutton:{
                //组件的配置对象和 vue的配置对象很相似,除了el
                data() {
                    //组件的配置对象当中data只能写函数
                    return {
                        count: 0
                    }
                },
                //定义组件模板
                template: '<div><h2>hello world</h2><button @click="count++">你点击了{{count}}次</button></div>',
            }
        }
    });
</script>
<script>
    const vm1=new Vue({
        el:"#app",
        data() {
            return undefined;
        }
    })
</script>
</body>
</html>